<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>数据展示</title>
    <link rel="stylesheet" href="css/wodry.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/public.css">
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script>
        $(function() {
            $('.myscroll').myScroll({
                speed: 60, //数值越大，速度越慢
                rowHeight: 38 //li的高度
            });
        });

        $(document).ready(function() {
            var whei = $(window).width()
            $("html").css({
                fontSize: whei / 22
            });
            $(window).resize(function() {
                var whei = $(window).width();
                $("html").css({
                    fontSize: whei / 22
                })
            });
        });
    </script>
</head>

<body>
    <div class="main">
        <div class="header">
            <div class="header-left fl" id="time"></div>
            <div class="header-center fl">
                <div class="header-title">
                    物流大数据展示
                </div>
                <div class="header-img"></div>
            </div>
            <div class="header-right fl"></div>
            <div class="header-bottom fl"></div>
        </div>
        <div class="center">
            <div class="center-left fl">
                <div class="left-top rightTop border">

                    <div class="title">基本信息</div>
                    <div class="top-list">
                        <p>当你征服一座山峰时，它已经在你脚下了，你必须再找一座山峰去征服，否则，你只有下山，走下坡路了</p>
                        <ul>
                            <li>成交额：4250万</li>
                            <li>成交量：3545万件</li>
                            <li>在线总数：1254万</li>
                            <li>总包裹量：7854万</li>
                            <li>在线商家：68万</li>
                            <li>已发件：154万</li>
                        </ul>
                    </div>
                </div>
                <div class="left-cen rightTop border">
                    <div class="title">包裹量排名</div>
                    <ul class="company" id="ceshi">
                        <li class="wodryRX0">
                            <span>NO.1</span> 湖南，包裹累计18.8万件
                        </li><br />
                        <li class="wodryRX1">NO.2 河南，包裹累计16.5万件
                        </li>
                        <br />
                        <li class="wodryRX2">NO.3 贵州，包裹累计15.9万件
                        </li>
                        <br />
                        <li class="wodryRX3">NO.4 上海，包裹累计15.2万件
                        </li>
                        <br />
                        <li class="wodryRX4">NO.5 北京，包裹累计14.7万件
                        </li>
                    </ul>
                </div>
                <div class="left-bottom rightTop border">
                    <div class="title">商品分类占比</div>
                    <div class="bottom-b">
                        <div id="chart3" class="allnav"></div>
                    </div>
                </div>
            </div>
            <div class="center-cen fl">
                <div class="cen-top rightTop border">
                    <div class="top-title">
                        <ul>
                            <li>
                                <p>数量统计</p>
                                <span>3</span>
                                <span>6</span>
                                <span>5</span>
                                <b>个</b>
                            </li>
                            <li>
                                <p>同比上升</p>
                                <span>1</span>
                                <span>3</span>
                                <b>%</b>
                            </li>
                        </ul>
                    </div>
                    <div class="top-bottom">
                        <div id="map" class="allnav" style="height: 4.4rem"></div>
                    </div>
                </div>
                <div class="cen-bottom rightTop border">
                    <div class="title">月统计</div>
                    <div class="bottom-b">
                        <div id="chart4" class="allnav"></div>
                    </div>
                </div>
            </div>
            <div class="center-right fr">
                <div class="right-top rightTop border">
                    <div class="title">商品销售排行</div>
                    <div class="echart wenzi">
                        <div class="gun">
                            <span>排名</span>
                            <span>商品名称</span>
                            <span>销量</span>
                        </div>
                        <div id="FontScroll" class="myscroll">
                            <ul>
                                <li>
                                    <div class="fontInner clearfix">
                                        <span>
<b>1</b>
</span>
                                        <span>女装</span>
                                        <span>4562万</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="fontInner clearfix">
                                        <span>
<b>2</b>
</span>
                                        <span>手机配件</span>
                                        <span>4125万</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="fontInner clearfix">
                                        <span>
<b>3</b>
</span>
                                        <span>手机</span>
                                        <span>4100万</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="fontInner clearfix">
                                        <span>
<b>4</b>
</span>
                                        <span>流行饰品</span>
                                        <span>3989万</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="fontInner clearfix">
                                        <span>
<b>5</b>
</span>
                                        <span>男装</span>
                                        <span>3956万</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="fontInner clearfix">
                                        <span>
<b>6</b>
</span>
                                        <span>真人发</span>
                                        <span>3823万</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="fontInner clearfix">
                                        <span>
<b>7</b>
</span>
                                        <span>手表</span>
                                        <span>3723万</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="fontInner clearfix">
                                        <span>
<b>8</b>
 </span>
                                        <span>服饰配件</span>
                                        <span>3500万</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="fontInner clearfix">
                                        <span>
<b>9</b>
</span>
                                        <span>电脑</span>
                                        <span>3412万</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="fontInner clearfix">
                                        <span>
<b>10</b>
</span>
                                        <span>化妆品</span>
                                        <span>3312万</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="fontInner clearfix">
                                        <span>
<b>11</b>
</span>
                                        <span>女鞋</span>
                                        <span>2856万</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="fontInner clearfix">
                                        <span>
<b>12</b>
</span>
                                        <span>礼品</span>
                                        <span>2631万</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="right-cen border">
                    <div class="title">各平台占比</div>
                    <div class="right-cen-cent">
                        <div id="chart2" class="allnav"></div>
                    </div>
                </div>
                <div class="right-bottom rightTop border">
                    <div class="title">全球贸易国家城市排行</div>
                    <div class="chat">
                        <div id="chart5" class="allnav"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
    <script src="js/wodry.min.js"></script>
    <script src="js/fontscroll.js"></script>
    <script src="js/echarts.js"></script>
    <script src="js/china.js"></script>

    <script>
        /*$('#ceshi').wodry({

                animation: 'rotateX',

                delay: 1000,

                animationDuration: 800

            });*/
        /*window.onload = function () {
            setInterval(function () {
                var hs=document.getElementById("ceshi");
                var hstyle=hs.style.transform;
                if(hstyle=='rotateX(-360deg)'){
                    //console.log(1)
                    hs.style.transform='rotateX(0deg)';
                    hs.style.transform='transform 500ms cubic-bezier(0.55, 0.18, 0.92, 0.46) 0s;'
                }else {
                    hs.style.transform='rotateX(-360deg)';
                    hs.style.transition="all 2s";
                }
            }, 5000);
        };*/
        var counter = 3000;
        var ulist = document.getElementById("ceshi").getElementsByTagName("li");
        for (var i = 0; i < ulist.length; i++) {
            //console.log(ulist[i].className);
            var liclass = ulist[i].className;
            var a = $('.' + liclass + '').wodry({
                animation: 'rotateX',
                delay: counter,
                animationDuration: 1000
            });
            if (counter > 3050) {
                counter = 3000;
            } else {
                counter += 10;
            }
            //console.log(counter);

        }

        //顶部时间
        function getTime() {
            var myDate = new Date();
            var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
            var myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
            var myToday = myDate.getDate(); //获取当前日(1-31)
            var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
            var myHour = myDate.getHours(); //获取当前小时数(0-23)
            var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
            var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
            var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            var nowTime;

            nowTime = myYear + '-' + fillZero(myMonth) + '-' + fillZero(myToday) + '&nbsp;&nbsp;' + fillZero(myHour) + ':' + fillZero(myMinute) + ':' + fillZero(mySecond) + '&nbsp;&nbsp;' + week[myDay] + '&nbsp;&nbsp;';
            //console.log(nowTime);
            $('#time').html(nowTime);
        };

        function fillZero(str) {
            var realNum;
            if (str < 10) {
                realNum = '0' + str;
            } else {
                realNum = str;
            }
            return realNum;
        }
        setInterval(getTime, 1000);
    </script>
</body>

</html>